<template>
	<uni-popup ref="popup"  backgroundColor="#fff" borderRadius="30px 30px 0 0"  @maskClick="close">
		<view class="imPop mask-wrapper">
			<view class="content" :class="{ PopOut: showState }">
				<view class="tit">
					<text class="text">上传形象建议 </text>

	<!-- 				<uni-icons type="clear" size="30" color="#7E8BFF" @click="close"></uni-icons> -->
				</view>
				<view class="example">
					<text class="example-tit">形象示例</text>
					<view
						style="
							margin-top: 20rpx;
							background-color: #fff;
							display: flex;
							justify-content: space-between;
							overflow: hidden;
							border-radius: 20rpx;
						"
					>
						<image
							style="height: 500rpx; overflow: hidden; border-radius: 20rpx; width: 50%"
							src="https://sm.2sxzw.com/mgmg/jiabin01/common/1726147300322.jpg"
						></image>
						<view
							style="
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: left;
								margin-left: 50rpx;
								flex: 1;
								gap: 30rpx 0;
							"
						>
							<view style="display: flex; align-items: center"
								><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 正脸图</view
							>
							<view style="display: flex; align-items: center"
								><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 人脸清晰</view
							>
							<view style="display: flex; align-items: center"
								><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 无遮挡</view
							>
							<view style="display: flex; align-items: center"
								><uni-icons color="#7E8BFF" type="checkmarkempty" size="30"></uni-icons> 无侧俯仰角</view
							>
						</view>
					</view>
				</view>
				<view class="example">
					<text class="example-tit">形象示例</text>
					<view style="display: flex; justify-content: space-between; gap: 20rpx; margin-top: 20rpx">
						<view class="item1">
							<image
								style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
								src="https://sm.2sxzw.com/mgmg/jiabin01/common/af61029f-0fb0-4081-901b-f12383770a48.jpeg"
							></image>
							<view class="txt"><uni-icons color="red" type="closeempty" size="24"></uni-icons> 侧脸</view>
						</view>
						<view class="item1">
							<image
								style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
								src="https://sm.2sxzw.com/mgmg/jiabin01/common/e6c518f4-d511-4bc9-ae5a-e8ffff74d8e3.jpeg"
							></image>
							<view class="txt"><uni-icons color="red" type="closeempty" size="24"></uni-icons> 脸部遮挡</view>
						</view>
						<view class="item1">
							<image
								style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
								src="https://sm.2sxzw.com/mgmg/jiabin01/common/20ad6c57-fcbc-4360-a404-b8245c64251c.jpeg"
							></image>
							<view class="txt"><uni-icons color="red" type="closeempty" size="24"></uni-icons> 脸太大</view>
						</view>
						<view class="item1">
							<image
								style="height: 200rpx; overflow: hidden; border-radius: 24rpx; width: 150rpx"
								src="https://sm.2sxzw.com/mgmg/jiabin01/common/WX20240912-205336@2x.jpg"
							></image>
							<view class="txt">
								<uni-icons
									style="width: 48rpx; height: 48rpx; overflow: hidden"
									color="red"
									type="closeempty"
									size="24"
								></uni-icons>
								脸太小
							</view>
						</view>
					</view>
				</view>
				<view class="desc"> 本功能将可能采集敏感信息用于AI合成，如上传非本人信息，请确保已获得本人授权同意的许可。 </view>
				<view class="bottom_btn">
					<button class="uploadImg_close" @click="close">不同意</button>
					<button class="uploadImg" @click="handleUploadImg">同意上传</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			showState: false,
		};
	},
	watch: {
		show: {
			handler(newVal) {
				if (newVal) {
					this.$refs.popup.open('bottom');
				} else {
					this.$refs.popup.close();
					this.$emit('handleClose');
				}
			},
		},
	},
	methods: {
		open() {
			this.$refs.popup.open('bottom');
		},
		close() {
			this.$emit('handleClose');
			this.$refs.popup.close('bottom');
			// this.$refs.popup.close();
		},
		handleUploadImg() {
			this.$emit('getUploadImg');
			this.close();
		},
	},
};
</script>

<style lang="scss" scoped>
.imPop {
	color: #333;
	.content {
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
		padding: 6rpx;
		transition: 0.3s all;

		.example {
			margin-top: 40rpx;

			.example-tit {
				color: #9ea2ad;
				font-size: 28rpx;
			}
			.item1 {
				.txt {
					display: flex;
					align-items: center;
					color: #333;
					font-size: 24rpx;
				}
			}
			.item {
				.txt {
					display: flex;
					align-items: center;
					color: #333;
					font-size: 24rpx;
				}
			}
		}

		.desc {
			margin: 20rpx 0;
			font-size: 24rpx;
			color: #686d81;
		}

		.bottom_btn{
			display: flex;
			justify-content: space-between;
		}
		.uploadImg {
			background: linear-gradient( 245deg, #7E8BFF 5%, #A3ACFF 99%);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			color: #fff;
			height: 92rpx;
			width: 49%;
		}
		.uploadImg_close{
			background: #9d9d9d;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			color: #fff;
			height: 92rpx;
			width: 49%;
		}

		.tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;
			font-weight: 700;
		}

		.top-area {
			margin-top: 104rpx;

			.Title {
				font-weight: 600;
				font-size: 48rpx;
				color: #16151f;
				line-height: 56rpx;
			}

			.TextSize {
				margin-top: 6rpx;
				margin-bottom: 64rpx;
			}
		}
	}

	.PopOut {
		bottom: 0;
	}

	.form {
		.formItme {
			box-sizing: border-box;
			// width: 622rpx;
			height: 96rpx;
			background: #f5f5f7;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			padding: 26rpx 40rpx;
			margin-bottom: 32rpx;
		}

		.Btn {
			margin-bottom: 62rpx;
		}
	}
}
</style>
